import React,{useState} from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button} from 'antd';
import request from '@/http';
import SecurityService from '@/pages/login/service';
const { Option } = Select;

interface EditObject {
  id?:Int16Array,
  isModalVisible: boolean,
  userName?: string,
  userSex?: string,
  userAge?: string,
  userTelphone?: any
}

const Edit=(props: { editObject: EditObject; onClose: any })=> {
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    console.log(editObject);
    setIsModalVisible(editObject.isModalVisible);
    formObject.setFieldsValue({
      ...editObject
    });
  }, [editObject]);
  return (
    <>
      <Modal
        width={800}
        title='学生信息维护'
        visible={isModalVisible}
        onCancel={modelOnCancel}
        maskClosable={false}
        destroyOnClose
        style={{ top: '20vh' }}
        footer={false}
      >
        <Form name="editForm" preserve={false} form={formObject} onFinish={async(values: any) =>{
          if(!editObject.id){
            await request.post('/api/Users/AddUsers',{
              userTelphone:values.userTelphone,
              state:0,
              password:'123456',
              role:2,
              account:values.userTelphone,
              userName:values.userName,
              userAge: parseInt(values.userAge),
              userSex:values.userSex
            }).then((response:any)=>{
              if(response.code==200){
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
            })
          }else{
            await request.post('/api/Users/EditUsers',{userTelphone:values.userTelphone,userSex:values.userSex,account:values.userTelphone,state:0,password:'123456',role:1,userAge: parseInt(values.userAge),userName:values.userName,id:editObject.id}).then((response:any)=>{
              if(response.code==200){
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
            })
          }
          
        }}>
          <Row gutter={24} justify='center' >
            <Col span={10} key='1'>
              <Form.Item
                label="姓名"
                name="userName"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={10} key='2'>
              <Form.Item
                label="性别"
                name="userSex"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Select placeholder="请录入">
                <Option value={0} key={0}>男</Option>
                <Option value={1} key={1}>女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={10} key='3'>
              <Form.Item
                label="年龄"
                name="userAge"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={10} key='4'>
              <Form.Item
                label="电话"
                name="userTelphone"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col>
            <Form.Item>
              <Button
                style={{marginRight:10}}
                htmlType='submit'
              >确认</Button>
              <Button
              onClick={modelOnCancel}
              >取消</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  )
}
export { EditObject, Edit };
